<template>
  <ComDialog v-model="dialogVisible" title="新增">
    <ElementEasyForm ref="comFromRef" class="mt20" :formJson="formJson">


    </ElementEasyForm>
    <template #footer>
	<div >
			<el-button size="large" @click="handleClose">取消</el-button>
			<el-button size="large" :loading="subLoading" type="primary" @click="submitData">保存</el-button>
		</div>
    </template>
    	
  </ComDialog>
</template>

<script setup lang="tsx">
import { ref, reactive, defineEmits, onMounted, watch, shallowRef } from "vue";

const emit = defineEmits(["update:modelValue"]);
const dialogVisible = shallowRef(false);
const subLoading = shallowRef(false);
const comFromRef = ref<any>();

const submitData =async ()=>{
try {
	const res = await comFromRef.value.validate();
	console.log('res :>> ', res);
} catch (error) {
	console.log('error :>> ', error);
 
}
}
const state = reactive({});
const formJson = ref<any>({
  "rowAttrs": {
    "gutter": 0,
    "justify": "start",
    "align": "middle"
  },
  "schema": [
    {
      "label": "范秀英",
      "type": "COMPONENT",
      "formItemAttrs": {},
      "attrs": {
        "placeholder": "请输入",
        "type": "text"
      },
      "rules": [],
      "prop": "CarolKarenThompson",
      "componentName": "selectTable",
      "hidden": {
        "matchPattern": "&&",
        "type": "select",
        "dataSelect": [],
        "value": false,
        "dataJs": "function hidden(config,data){\n        return false;\n      }"
      },
      "colAttrs": {
        "span": 12,
        "offset": 0,
        "push": 0,
        "pull": 0
      }
    },
    {
      "label": "阎军",
      "type": "COMPONENT",
      "formItemAttrs": {},
      "attrs": {
        "placeholder": "请输入",
        "type": "text"
      },
      "rules": [],
      "prop": "BrianAmyAnderson",
      "componentName": "ElInput",
      "hidden": {
        "matchPattern": "&&",
        "type": "select",
        "dataSelect": [],
        "value": false,
        "dataJs": "function hidden(config,data){\n        return false;\n      }"
      },
      "colAttrs": {
        "span": 12,
        "offset": 0,
        "push": 0,
        "pull": 0
      }
    }
  ],
  "model": {
    "CarolKarenThompson": "",
    "BrianAmyAnderson": ""
  },
  "formAttrs": {
    "hide-required-asterisk": false,
    "inline-message": false,
    "status-icon": false,
    labelWidth: "100px",
    "scroll-to-error": false
  }
});
let props: any = defineProps({
  modelValue: {
    type: Boolean,
    defalut: false,
  },
});

watch(
  () => props.modelValue,
  (val) => {
    dialogVisible.value = val;
  },
  {
    immediate: true,
  }
);
const handleClose = () => {
  emit("update:modelValue", false);
};
watch(
  () => dialogVisible.value,
  (val) => {
    if (!val) {
      handleClose();
    }
  }
);
</script>

<style scoped lang="scss"></style>
